<template>
  <div>
    <!-- 页头 -->
    <div class="navbar">
      <div class="left">
        <img src="../assets/82ed17ba7bf444a09a31a03761b38ac7.png" alt="" />
      </div>
      <h1 class="pingtai">云平台及大数据</h1>
      <div class="right">
        <img src="../assets/ba3d8810ff5e4e4db3e182d8222f6563.png" alt="" />
      </div>
    </div>
    <!-- 注册 -->
    <div class="beijing">
      <!-- 图片 -->
      <div class="tupian">
        <img src="../assets/loginImg.png" alt="" />
      </div>
      <!-- 注册表 -->
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        size="small"
        label-width="70px"
        class="zhuce1"
      >
        <div class="ziti">
          <span style="color: rgb(0, 166, 203); font-size: 20px">
            用户注册</span
          >
          <br />
        </div>
        <el-form-item prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="手机号" type="text" />
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            placeholder="用户名"
            type="text"
          />
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            v-model="ruleForm.pwd"
            placeholder="密码"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item prop="pwd2">
          <el-input
            v-model="ruleForm.pwd2"
            placeholder="确认密码"
            type="password"
            show-password
          />
        </el-form-item>
        <div class="anjian">
          <el-form-item>
            <router-link to="/">
              <el-button
                @click="submit"
                type="primary"
                style="
                  width: 91.5px;
                  height: 38px;
                  font-size: 16px;
                  background-color: #f0f0f0;
                  color: black;
                  border: #fff;
                "
                >返回</el-button
              >
            </router-link>
          </el-form-item>
          <el-form-item>
            <router-link to="/">
              <el-button
                @click="submit"
                type="primary"
                style="height: 38px; font-size: 16px"
                >立即注册</el-button
              >
            </router-link>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 页脚 -->
    <div class="yejiao">
      <div class="a1">
        <img src="../assets/erweima.png" alt="" />
      </div>
      <div class="yangshi">
        <div class="biao1">
          <li>特来电首页</li>
          <li>合作伙伴</li>
          <li>帮助中心</li>
          <li>联系我们</li>
          <li>隐私政策</li>
          <li>增值电信业务经营许可证:合字B2-20210028</li>
        </div>
        <div>
          <li>Copyright © 2014 - 2022 特来电新能源有限公司</li>
        </div>
        <div>
          <li>鲁ICP备14031144号-3</li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkPwd2 = (rule, value, callback) => {
      if (value != this.form.pwd) {
        callback(new Error("密码输入不一致"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        phone: "",
        username: "",
        pwd: "",
        pwd2: "",
      },
      rules: {
        phone: [
          { required: true, message: "手机不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "用户名必填", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { pattern: /^\d{6}$/, message: "密码必须是6位数字", trigger: "blur" },
        ],
        pwd2: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: checkPwd2, trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.center {
  margin: 0 auto;
  text-align: center;
}
// 页头样式
.navbar {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.left {
  margin-left: 200px;
}
.right {
  margin-right: 200px;
  margin-top: 15px;
}
.pingtai {
  margin-right: 600px;
  margin-top: 15px;
}
// 注册背景样式
.beijing {
  background-image: url(../assets/loginBackgroundColor.f41eb68.jpg);
  display: flex;
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  user-select: none;
}
.tupian {
  padding-top: 12px;
}
.zhuce1 {
  width: 350px;
  height: 350px;
  margin-top: 100px;
  background-color: #fff;
  padding-right: 50px;
  text-align: center;
}
.anjian {
  display: flex;
}
.ziti {
  padding: 20px 0;
  padding-left: 40px;
}
.yejiao {
  display: flex;
  background-color: rgb(228, 228, 228);
  padding-bottom: 100px;
}
.biao1 {
  list-style: none;
  display: flex;
}
li {
  font-size: 14px;
  list-style: none;
}
.a1 {
  margin-top: 50px;
  margin-left: 500px;
}
.biao1 > li {
  padding-right: 15px;
  text-align: center;
}
.yangshi {
  flex-direction: column;
  margin-left: 30px;
  margin-top: 60px;
  text-align: left;
}
</style>